<template>
    <div class="whole">

        <van-tabs title-active-color="#FF2828" color="#FF2828" @click="tabDitch()" v-model:active="active">
            <van-tab :title="item.channelName" v-for="(item,index) in tabList" :key="index" :name="index" />
        </van-tabs>
        <div class="dis searchBox">
            <van-search v-model="terminalSn" placeholder="请输入终端编号" shape="round" :show-action="showAction"
                @search="onSearch" class="search">
            </van-search>
            <div class="" @click="onSearch">
                搜索
            </div>
        </div>
        <div class="wrapperCenter">
            <div class="content">
                <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getList"
                    :immediate-check="false">
                    <empty v-if="!list.length"></empty>
                    <div class="dis" v-for="(item,index) in list" :key="index">
                        <div class="main" :class="index!=0?'main_top':''">
                            <div class="main_d">
                                <div class="institution_a">
                                    <div class="institution">
                                        终端编号：{{item.terminalSn}}
                                    </div>
                                    
                                    <div class="condition">
                                        原归属人名称：<span>{{item.originalNo}}</span>
                                    </div>
                                    <div class="condition">
                                        新归属人名称：<span>{{item.newNo}}</span>
                                    </div>
                                    <div class="condition">
                                        划拨时间：{{item.createTime}}
                                    </div>
                                    <div class="condition">
                                        终端状态：<span v-if="item.operationType==0">入库</span>
                                        <span v-else-if="item.operationType==1">下拨</span>
                                        <span v-else-if="item.operationType==2">绑定</span>
                                        <span v-else-if="item.operationType==3">回拨</span>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </van-list>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        selectPosOrderList,
        selectAgentChannelInf,
        selectPosHisInf
    } from '@/api/terminal'
    import store from '@/store'
    import {
        showToast,
        showConfirmDialog
    } from 'vant'
    export default defineComponent({
        name: 'sateActive',
        setup() {
            const router = useRoute()
            const routers = useRouter()
            const state = reactive({
                channelCode: "",
                active: 0,
                tabList: [],
                pageStart: 1,
                pageSize: 10,
                loading: false,
                finished: false,
                list: [],
                channelName: "",
                terminalSn: ""
            })
            state.active = Number(router.query.active) 
            console.log( state.active,router.query.active)
            //获取渠道列表
            const getTabList = () => {
                selectAgentChannelInf({
                    channelType: 1
                }).then(res => {
                    state.tabList = res.data
                    state.channelCode = state.tabList[state.active].channelCode
                    state.channelName = state.tabList[state.active].channelName
                    getList()
                })
            }
            getTabList()
            //tab切换
            const tabDitch = () => {
                state.pageStart = 1
                state.list = []
                state.channelName = state.tabList[state.active].channelName
                state.channelCode = state.tabList[state.active].channelCode
                getList()
            }
            //获取数据
            const getList = () => {
                console.log(router.query)
                console.log(state.channelCode)
                let parames = {
                    channelCode: state.channelCode,
                    pageStart: state.pageStart,
                    pageSize: state.pageSize,
                    terminalSn: state.terminalSn
                }
                selectPosHisInf(parames).then(res => {
                    if (res.data.records.length != 0) {
                        if (res.data.records.length < 10) {
                            state.finished = true
                            state.loading = false
                        } else {
                            state.pageStart++
                            state.finished = false
                            state.loading = false
                        }
                        state.list = state.list.concat(res.data.records)
                    } else {
                        state.list = []
                        state.finished = true
                        state.loading = false
                    }
                })
            }
            const onSearch = () => {
                state.pageStart = 1
                state.list = []
                state.channelName = state.tabList[state.active].channelName
                state.channelCode = state.tabList[state.active].channelCode
                getList()
            }
            return {
                ...toRefs(state),
                getList,
                getTabList,
                tabDitch,
                onSearch
            }
        }
    })
</script>
<style scoped lang="scss">
    .whole {
        height: 100vh;
        background-color: #fff;
        overflow-y: auto;

        .search {
            width: 328px;
            // position: fixed;
            // top: 0;
        }

        .wrapperCenter {
            height: 100vh;
            overflow: scroll;

            .content {

                // padding: 0 10px;
                // padding-bottom:50px;
                // box-sizing: border-box;
                .main {
                    width: 339px;
                    // height: 62px;
                    background: #FFFFFF;
                    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
                    border-radius: 6px;
                    padding: 12px 0px 12px 0px;
                    box-sizing: border-box;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 500;
                    font-size: 12px;
                    color: #333333;
                    margin-top: 12px;

                    img {
                        width: 23px;
                        height: 23px;
                        border-radius: 6px;
                    }

                    .main_d {
                        .institution_a {
                            padding-left: 12px;
                            box-sizing: border-box;
                        }
                    }

                    .institution {
                        // width: 150px;
                        // white-space: nowrap;
                        // text-overflow: ellipsis;
                        // overflow: hidden;
                    }



                    .condition {
                        margin-top: 12px;
                        // margin-left: 12px;
                    }
                }
            }
        }

        .searchBox {
            margin-top: 12px;
        }
    }

    ::v-deep .van-search__content {
        background-color: #FFECEC !important;
    }
</style>